<template>
  <section>
    <el-card shadow="never" class="cardBox">
      <div slot="header" class="clearfix">
        <el-row type="flex" justify="space-between" align="middle">
          <span>区块链分布式记账实时交易信息</span>
          <!-- <el-button type="text" @click="handleMore">
            更多
            <i class="el-icon-d-arrow-right"></i>
          </el-button>-->
        </el-row>
      </div>
      <el-row class="box">
        <el-row type="flex" justify="space-between">
          <template v-if="data.length">
            <el-card
              class="cardCon"
              v-for="(item, idx) of data"
              :key="idx"
              @click.native="goDetail(item)"
               style="cursor: pointer"
            >
              <el-row type="flex" justify="center">区块 {{ item.height }}</el-row>
              <el-divider></el-divider>
              <el-row type="flex" justify="center">交易量 {{ item.txn_qty }}</el-row>
            </el-card>
          </template>
          <div v-else style="width: 100%;text-align: center; line-height: 100px;color: #909399;">暂无数据</div>
        </el-row>
        <el-divider v-if="data.length" class="dividerStyle"></el-divider>
      </el-row>
    </el-card>
  </section>
</template>
<script lang='ts'>
import { Vue, Component, Watch, Prop } from "vue-property-decorator";
import BaseSlot from "@/components/BaseSlot.vue";
import Constant from "@/lib/Constant";

@Component
export default class MyApplication extends Vue {
  @Prop()
  protected situationData: any = {
    starttime: null,
    endtime: null
  };
  protected data: any = [];
  protected goDetail(row: any) {
    this.$router.push({ path: "/blockDetail", query: row });
  }
  protected handleMore() {
    this.$router.push({ path: "/blockDetail", name: "区块详情" });
  }
  protected created() {
    this.init();
  }
  // @Watch("situationData", { deep: true })
  protected async init() {
    const params: any = {
      page_no: 1,
      page_size: 10,
      starttime: this.situationData.starttime,
      endtime: this.situationData.endtime
    };
    await this.$api.getBlocksQuery(params).then((response: any) => {
      const {
        data: { blocks }
      } = response;
      this.data = blocks;
    });
  }
}
</script>

<style lang="scss" scoped>
.mr_vertical_10 {
  margin: 10px 0;
}
.box {
  position: relative;
  /deep/ .el-card__body {
    padding: 6px 20px;
  }
  .cardCon {
    background-image: linear-gradient(#019ffb, #0e59d6);
    color: #fff;
    .el-divider--horizontal {
      margin: 12px 0;
    }
    z-index: 1;
  }
  .dividerStyle {
    position: absolute;
    top: 30%;
    z-index: 0;
    background-color: #019ffb;
    height: 2px;
  }
}
</style>


